<template>
  <view>
    <view style="display: flex; justify-content: center; margin: 20rpx 0">
      <view style="width: 50%">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </view>
    </view>
    <view v-if="current === 0">
      <view class="form">
        <view class="form-content">
          <view class="form-item">
            <text class="label">危废行业俗称:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.wfTypeName
            }}</text>
          </view>
          <view class="form-item">
            <text class="label">所属部门:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.deptName
            }}</text>
          </view>
          <view class="form-item">
            <text class="label">预计转移时间:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.planTransTime
            }}</text>
          </view>
          <view class="form-item">
            <text class="label">转移总量:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.wfTrans_Weight ||
              memberStore.QueryTransferDetails.wfTypeWeight
            }}</text>
          </view>
          <view class="form-item">
            <text class="label">去向:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.transTo
            }}</text>
          </view>
          <ImageLogic :picturesPath="picturesPath" :isHide="true"></ImageLogic>
          <view class="form-item">
            <text class="label">备注:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.remark
            }}</text>
          </view>
          <view class="form-item">
            <text class="label">申请人:</text>
            <text class="iptClass">{{
              memberStore.QueryTransferDetails.userName
            }}</text>
          </view>
          <view class="form-item" v-if="processLists.length">
            <text class="label">流程:</text>
          </view>
          <view class="scrollClass" v-if="processLists.length">
            <view
              class="listsClass"
              v-for="(item, index) in processLists"
              :key="index"
            >
              <view>
                <text class="mgr">审批人:{{ item.username }}</text>
                <text class="mgr"
                  >环节:{{ item.wfOperationLogActivityName }}</text
                >
              </view>
              <view>
                <text>意见:{{ item.wfOperationLogHandleSuggestion }}</text>
                <text>日期:{{ item.wfOperationLogOperationTime }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="current === 1">
      <view
        class="overClass"
        v-if="memberStore.stateTable.rows.length"
        style="height: 82vh"
      >
        <view v-for="item in memberStore.stateTable.rows" :key="item.id">
          <view class="wrapBox">
            <view class="smallBox">
              <text class="maxwidth"> 危废行业俗称:{{ item.wfTypeName }} </text>
              <text> 容器/包装类型:{{ item.wfContainerType }} </text>
            </view>
            <view class="smallBox">
              <text> 产出日期:{{ item.create_Time }} </text>
              <text> 登记人:{{ item.registrant }} </text>
            </view>
            <view class="smallBox">
              <!-- <text> 名称:{{ item.wfName }} </text> -->
              <text> 去向:{{ item.wfTo }} </text>
            </view>
            <!-- <view class="smallBox">
              <text> 单位:{{ item.wfUnit }} </text>
              <text> 产出量:{{ item.wfWeight }} </text>
            </view> -->
            <!-- <view class="smallBox">
              <text> 废物类别:{{ item.wfTypeCode }} </text>
              <text> 危废代码:{{ item.wfCreateCode }} </text>
            </view> -->
          </view>
        </view>
      </view>
      <view class="wuClass" v-else>
        <view>暂无数据</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  select_register_by_ids,
  wfTypeFindPage,
  select_flow_detail,
  select_user_by_ids,
} from "./index";
import { parseTime } from "@/utils";
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
const picturesPath = ref([]);
const current = ref(0);
const items = ref(["基本信息", "转运详情"]);
const styleType = ref("button");
const activeColor = ref("#007aff");
const processLists = ref([]);
onLoad(async () => {
  memberStore.stateTable.rows = [];
  if (memberStore.QueryTransferDetails.picture) {
    picturesPath.value = JSON.parse(memberStore.QueryTransferDetails.picture);
  }
  const res = await select_register_by_ids(
    memberStore.QueryTransferDetails.wfIds
  );
  memberStore.stateTable.rows = JSON.parse(JSON.stringify(res.data));
  const ress = await wfTypeFindPage();
  const createUserIds = memberStore.stateTable.rows.map(
    (item) => item.createUserId
  );
  const idsStr1 = [...new Set(createUserIds)].join();
  const resids = await select_user_by_ids(idsStr1);
  memberStore.stateTable.rows.forEach((item) => {
    item.create_Time = parseTime(item.produceTime, "{y}-{m}-{d}");
    const obj1 = resids.data.find((list) => list.userId == item.createUserId);
    if (obj1) {
      item.registrant = obj1.username;
    }
    //获取危废行业俗称
    if (item.wfType) {
      const typeLists = item.wfType.split(",");
      const TypeNames = [];
      typeLists.forEach((wfType) => {
        const obj1 = ress.data.find((item) => item.id == wfType);
        if (obj1) {
          TypeNames.push(obj1.wfTypeName);
        }
      });
      item.wfTypeName = TypeNames.join(",");
    }
    //获取危废行业俗称
  });
  const result = await select_flow_detail(
    memberStore.QueryTransferDetails.flowInstanceId
  );
  processLists.value = JSON.parse(JSON.stringify(result.data));
  const wfOperationLogUserIds = processLists.value.map(
    (item) => item.wfOperationLogUserId
  );
  const idsStr2 = [...new Set(wfOperationLogUserIds)].join();
  const res1 = await select_user_by_ids(idsStr2);
  processLists.value.forEach((item) => {
    const obj = res1.data.find(
      (list) => list.userId == item.wfOperationLogUserId
    );
    if (obj) {
      item.username = obj.username;
    }
    item.wfOperationLogOperationTime = parseTime(
      item.wfOperationLogOperationTime
    );
  });
});
const onClickItem = (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
  }
};
</script>

<style lang="scss" scoped>
.form {
  background-color: #f4f4f4;
  .form-content {
    height: 82vh;
    overflow-y: auto;
  }
  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      // width: 180rpx;
      white-space: nowrap;
      padding-right: 5rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }
}
.liucheng {
  display: flex;
  justify-content: space-around;
}
.wuClass {
  height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(0, 122, 255);
  // font-size: 40rpx;
}
.listsClass {
  line-height: 46rpx;
  padding: 25rpx 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ddd;
  view {
    display: flex;
    justify-content: space-between;
  }
}
.scrollClass {
  // height: 80vh;
  // overflow-y: auto;
}
</style>